<template>
  <div class="h100">
    <v-tree @getOrgId="getOrgId" :params="dParams">
      <el-button
        type="default"
        icon="el-icon-refresh-right"
        class="ml10 pd10"
        slot="search"
        title="同步"
        @click="update"
      ></el-button>
      <span slot="content" class="content">
        <div class="tab-content">
          <div class="listbox">
            <v-list
              v-if="params.department"
              :api="api.getUrl"
              ref="list"
              cards="1"
              cols="150,100,100,100,100"
              :params="params"
            >
              <template slot="search"></template>
              <template slot="head">
                <thead>
                  <tr class="tr">
                    <th>磁盘</th>
                    <th>所属实例ID</th>
                    <th>磁盘类型</th>
                    <th>类别</th>
                    <th>创建时间</th>
                  </tr>
                </thead>
              </template>
              <template slot="item" slot-scope="props">
                <tr>
                  <td @click="setBaseInfo(props.item)">
                    <span class="font-blue">{{ props.item.DiskName || '-'}}</span>
                    <br />
                    <span class="font-gray2">{{ props.item.DiskId || '-' }}</span>
                  </td>
                  <td>
                    <span class="font-gray2">{{ props.item.InstanceId }}</span>
                  </td>
                  <td>
                    <span
                      class="font-gray2"
                    >{{ props.item.Type === 'system' ? '系统盘' : props.item.Type === 'data' ? '数据盘' : '-' }}</span>
                  </td>
                  <td>
                    <span class="font-gray2" v-if="props.item.Category === 'cloud'">普通云盘</span>
                    <span class="font-gray2" v-if="props.item.Category === 'cloud_efficiency'">高效云盘</span>
                    <span class="font-gray2" v-if="props.item.Category === 'cloud_ssd'">SSD盘</span>
                    <span class="font-gray2" v-if="props.item.Category === 'cloud_essd'">ESSD云盘</span>
                    <span
                      class="font-gray2"
                      v-if="props.item.Category === 'local_ssd_pro'"
                    >I/O密集型本地盘</span>
                    <span class="font-gray2" v-if="props.item.Category === 'local_hdd_pro'">吞吐密集型本地盘</span>
                    <span class="font-gray2" v-if="props.item.Category === 'ephemeral'">本地盘</span>
                    <span class="font-gray2" v-if="props.item.Category === 'ephemeral_ssd'">本地SSD盘</span>
                    <span class="font-gray2" v-if="!props.item.Category">-</span>
                  </td>
                  <td>
                    <span
                      class="font-gray2"
                      v-if="props.item.CreationTime"
                    >{{ props.item.CreationTime | dateFormat('yy-MM-dd HH:mm:ss') }}</span>
                    <span class="font-gray2" v-else>-</span>
                  </td>
                </tr>
              </template>
            </v-list>
          </div>
        </div>
      </span>
    </v-tree>
    <!-- 详情开始 -->
    <v-baseinfo v-model="drawer.show" :name="drawer.name">
      <div class="wrapper-content" v-if="drawer.data" slot="org/home">
        <div class="content-item">
          <span class="label">磁盘名称：</span>
          <span class="value">{{drawer.data.DiskName || '-'}}</span>
        </div>
      </div>
    </v-baseinfo>
    <!-- 详情结束 -->
  </div>
</template>

<script>
export default {
  watch: {
    $route: {
      handler(to, form) {
        this.initReq(to);
      }
    }
  },
  data() {
    return {
      params: {
        department: ""
      },
      drawer: {
        show: false,
        data: null,
        name: "阿里云磁盘"
      },
      api: {
        getUrl: "",
        syncUrl: ""
      },
      dParams: {
        order_by: ""
      }
    };
  },
  methods: {
    initReq(route) {
      let mod = route.path.split("/")[3];
      this.api.getUrl = `instance.get_aliyun_${mod}_disk`;
      this.api.syncUrl = `instance.sync_aliyun_${mod}_disk`;
      this.dParams.order_by = "aliyun_ecs";
    },
    // 获取左侧组织id
    getOrgId(val) {
      if (this.params.department !== val) {
        this.params.department = val;
      }
    },
    update() {
      this.$api.jget(this.api.syncUrl).then(res => {
        if (res.status === 1) {
          this.$success(res.msg);
        } else {
          this.$error(res.msg);
        }
      });
    },
    setBaseInfo(item) {
      // this.drawer.show = true;
      // this.drawer.data = item;
    }
  },
  mounted() {
    this.initReq(this.$route);
  }
};
</script>

<style>
</style>